<template>
  <div class="user-card">
    <div class="card-header">
      <h2>{{ name }}</h2>
      <p>{{ statusText }}</p>
    </div>
    <div class="card-body" v-if="!isCollapsed">
      <slot>默认</slot>
      <!-- 这里可以插入动态内容 -->
    </div>
    <div class="card-footer">
      <!-- 插槽，用于插入自定义按钮 -->
      <slot name="actions"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const porps = defineProps<{
  name: string
  status: string
}>()
const emit = defineEmits(['update'])
emit('update')
const isCollapsed = ref(false)
const statusText = computed(() => {
  return porps.status === '在线' ? '用户在线' : '用户离线'
})
const xscard = () => {
  isCollapsed.value = !isCollapsed.value
}
defineExpose({
  xscard
})
</script>

<style lang="scss" scoped>
/* 子组件 UserCard.vue */
.user-card {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: #f5f5f5;
  padding: 10px;
  font-size: 1.25rem;
  font-weight: bold;
}

.card-body {
  padding: 15px;
  font-size: 1rem;
}

.card-footer {
  padding: 10px;
  background-color: #f9f9f9;
  text-align: right;
}
</style>
